<template>
	<view class="box1" hover-class="box1-hover" hover-start-time=0>
		<view class="box1-inner" hover-class="box1-inner-hover" hover-start-time=0 hover-stop-propagation>内部元素</view>
	</view>
	<view>------------------------------------------------------------</view>
	<scroll-view scroll-x class="scrollView">
		<view class="scrollViewbox">scroll子元素</view>
		<view class="scrollViewbox">scroll子元素</view>
		<view class="scrollViewbox">scroll子元素</view>
		<view class="scrollViewbox">scroll子元素</view>
		<view class="scrollViewbox">scroll子元素</view>
		<view class="scrollViewbox">scroll子元素</view>
		<view class="scrollViewbox">scroll子元素</view>
		<view class="scrollViewbox">scroll子元素</view>
	</scroll-view>
</template>

<script setup> 

</script>

<style lang="scss">
	.box1{
		width: 200rpx;
		height: 200rpx;
		background-color: #CCC;
	}
	.box1-hover{
		background-color: red;
	}
	.box1-inner{
		width: 100rpx;
		height: 100rpx;
		background-color: green;
	}
	.box1-inner-hover{
		background-color: orange;
	}
	.scrollView{
		width: 80%;
		height: 200rpx;
		border: 1px solid red;
		white-space: nowrap;    //禁止换行
		.scrollViewbox{
			width: 200rpx;
			height: 100rpx;
			background-color: orange;
			display: inline-block; //修改布局
			margin-left: 2px; 
		}
	}
</style>
